.filter {
  width: 208px;
}

.filter__heading {
  margin: 0;
  margin-bottom: 28px;
  font-size: 18px;
  letter-spacing: 0.03em;
}

.filter__block {
  margin: 0;
  margin-top: 13px;
  padding: 0;
  border: none;
  border-top: 1px solid $filter-border;
}

.filter__block-heading {
  font-size: 18px;
  margin: 0;
  margin-top: 31px;
  letter-spacing: 0.03em;
}

.filter__checkbox-list {
  margin: 0;
  margin-top: 26px;
  padding: 0;
  list-style: none;
}

.filter__checkbox-item {
  margin: 18px 0;
}

.filter__checkbox-label {
  padding-left: 40px;
  letter-spacing: 0.03em;
  cursor: pointer;
  user-select: none;
  position: relative;

  &::before {
    content: "";
    width: 24px;
    height: 24px;
    border: 1px solid $input-border;
    border-radius: 2px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
}

.filter__checkbox-input:hover + .filter__checkbox-label,
.filter__checkbox-input:focus + .filter__checkbox-label {
  &::before {
    border-color: $price-dash;
  }
}

.filter__checkbox-input:active + .filter__checkbox-label,
.filter__checkbox-input + .filter__checkbox-label:active {
  &::before {
    border-color: $checkbox-active;
  }
}

.filter__checkbox-input:checked + .filter__checkbox-label {
  &::after {
    content: "";
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m4.283 9.191-3.9-3.877a.24.24 0 0 1 0-.342l.985-.985a.24.24 0 0 1 .34 0l2.567 2.552a.242.242 0 0 0 .341-.001L10.29.81A.242.242 0 0 1 10.63.81l.985.985a.241.241 0 0 1 .001.34l-6.18 6.236h.002l-.815.82a.242.242 0 0 1-.341 0Z' fill='%23585757'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
  }
}

.filter__checkbox-input:disabled + .filter__checkbox-label {
  color: $checkbox-disabled-border;

  &::before {
    background-color: $checkbox-disabled-background;
    border-color: $checkbox-disabled-border;
  }
}
